<template>
	<view class="resource-container">
		<view class="containera" v-if="!isShowvideo">
			<u-navbar title="资源解析" :safeAreaInsetTop="false">
				<view class="u-nav-slot3" slot="left" v-if="nickname" @click="drawerVisible=true">
					{{nickname}}
				</view>
				<view v-else>
					<view class="u-nav-slot1" slot="left">
						游客12234111111111111
					</view>
					<view class="u-nav-slot2" slot="right">
						登录
					</view>
				</view>
			</u-navbar>
			<image style="width: 100%;" src="@/static/icon5.png" mode="widthFix"></image>
			<view class="content">
				<view class="input-area">
					<u--textarea v-model="videoUrl" placeholder="请将复制的链接地址贴贴在此处"></u--textarea>
				</view>
				<view class="button-group">
					<u-button text="清空内容" color="#F57B00" plain shape="circle" @click="clearInput"></u-button>
					<u-button text="一键解析" color="#F57B00" shape="circle" @click="handleAnalyze"></u-button>
				</view>

				<!-- 支持平台 -->
				<view class="platform-section">
					<view class="section1">
						<image class="icon1" src="/static/icon7.png" mode=""></image>
						<view class="section-title">支持平台</view>
					</view>
					<view class="platform-grid">
						<view class="platform-item" v-for="(item, index) in platforms" :key="index">
							<image :src="baseUrl+item.icon_image" class="platform-icon" mode="aspectFit"></image>
							<text class="platform-name">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 侧边抽屉 -->
			<u-popup :show="drawerVisible" mode="left" @close="closeDrawer" :round="10">
				<view class="drawer-content">
					<view class="drawer-header">
						<text class="drawer-title">菜单选项</text>
					</view>
					<view class="drawer-list">
						<view class="drawer-item" @click="handleItemClick('instruction')">
							<u-icon name="file-text" size="20"></u-icon>
							<text>使用说明</text>
						</view>
						<view class="drawer-item" @click="handleItemClick('history')">
							<u-icon name="clock" size="20"></u-icon>
							<text>历史记录</text>
						</view>
						<view class="drawer-item" @click="handleItemClick('nickname')">
							<u-icon name="edit-pen" size="20"></u-icon>
							<text>修改昵称</text>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 弹窗遮罩层 -->
			<view class="popup-mask" v-if="showPopup"></view>
			<view class="popup-content" v-if="showPopup">
				<view class="close-btn" @click="closePopup">
					<image src="/static/icon11.png" mode=""></image>
				</view>
				<view class="title-tips">
					温馨提示
				</view>
				<view class="icon-container">
					<image class="popup-icon" src="@/static/icon10.png" mode="aspectFit"></image>
				</view>
				<view class="popup-text">
					<text class="error-text">链接地址解析有误，请确认后重新粘贴在输入框内~</text>
				</view>

				<!-- 按钮 -->
				<view class="btn-container">
					<button class="back-btn" @click="goBack">返回首页</button>
				</view>
			</view>
		</view>
		<view class="video-list" v-if="isShowvideo">
			<view class="list-container">
				<view v-for="(item, index) in videoList" :key="index" class="video-item"
					@click="handleVideoClick(item)">
					<u-image :src="video.pic" width="100%" height="160px" :radius="0">
					</u-image>
					<view class="video-info">
						<view class="video-title u-line-2">{{video.title}}</view>
						<view class="video-meta">
							<text class="quality">{{item.resName}}</text>
							<text class="save-btn" @click.stop="handleSave(item)">前往保存</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		platforms
	} from '@/api/icon.js'
	import {
		history_list,
		getVideoexport,
		support_list
	} from '@/api/user.js'
	import apiUrl from '@/common/config.js'
	export default {
		data() {
			return {
				baseUrl: apiUrl,
				videoUrl: '',
				platforms: [],
				drawerVisible: false,
				showPopup: false,
				loading: false,
				videoInfo: null,
				videoList: [],
				video: {},
				isShowvideo: false,
				nickname: ''
			}
		},
		onShow() {
			this.nickname = uni.getStorageSync('nickname')
			support_list().then(response => {
				this.platforms = response.data.rows
			})
		},
		methods: {
			async handleAnalyze() {
				if (!this.videoUrl) {
					uni.showToast({
						title: '请输入视频链接',
						icon: 'none'
					});
					return;
				}


				this.loading = true;

				try {
					// 1. 解析视频链接
					const response = await getVideoexport({
						url: this.videoUrl,
						device_id: '1111111'
					});
					if (response.code === 1) {
						
						// this.isShowvideo = true
						// this.videoList = response.data.res
						// this.video = response.data
						uni.setStorageSync('videoList', response.data)
						uni.setStorageSync('videoUrl', this.videoUrl)
						uni.navigateTo({
							url: '/pages/videolist/videolist'
						})


						// this.videoList = response.data.res
						// // 2. 获取视频信息
						// const videoInfo = await getVideoInfo(parseResult.data.videoId);
						// this.videoInfo = videoInfo.data;

						// // 3. 获取下载链接
						// const downloadUrl = await getDownloadUrl(parseResult.data.videoId);

						// // 4. 跳转到结果页面
						// uni.navigateTo({
						// 	url: `/pages/result/result?videoInfo=${encodeURIComponent(JSON.stringify(videoInfo.data))}&downloadUrl=${encodeURIComponent(downloadUrl.data.url)}`
						// });

						// 注册成功后的处理
						// setTimeout(() => {
						// 	uni.redirectTo({
						// 		url: '/pages/index/index'
						// 	})
						// }, 1500)
					} else {
						throw new Error(response.msg)
					}


				} catch (response) {
					console.log('解析失败:', response);
					this.showPopup = true;
				} finally {
					this.loading = false;
				}
			},
			clearInput() {
				this.videoUrl = '';
				this.videoInfo = null;
			},
			closePopup() {
				this.showPopup = false
			},
			goBack() {
				this.showPopup = false;
				// uni.navigateBack()
			},
			openDrawer() {
				this.drawerVisible = true
			},
			closeDrawer() {
				this.drawerVisible = false
			},
			handleItemClick(type) {
				switch (type) {
					case 'instruction':
						// 处理使用说明点击
						break
					case 'history':
						// 处理历史记录点击
						uni.navigateTo({
							url: '/pages/history/history'
						})
						break
					case 'nickname':
						// 处理修改昵称点击
						uni.navigateTo({
							url: '/pages/nickname/nickname'
						})
						break
				}
				this.closeDrawer()
			}
		}
	}
</script>

<style lang="scss">
	.resource-container {
		width: 100%;
		height: 100vh;
		position: relative;
		font-family: PingFangSC, PingFang SC;

		.u-nav-slot1 {
			width: 160rpx;
			text-align: center;
			padding: 10rpx;
			border-radius: 32rpx;
			border: 1px solid #E5E5E5;
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 隐藏溢出内容 */
			text-overflow: ellipsis;
		}

		.u-nav-slot2 {

			font-weight: 400;
			font-size: 28rpx;
			color: #F57B00;
		}

		.u-nav-slot3 {
			color: #F57B00;
			width: 160rpx;
			text-align: center;
			padding: 10rpx;
			border-radius: 32rpx;
			border: 1px solid #E5E5E5;
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 隐藏溢出内容 */
			text-overflow: ellipsis;
		}

		.content {
			position: relative;
			z-index: 99;
			background: #ffffff;
			margin-top: -40rpx;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			padding: 40rpx;

			.icon-area {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 300rpx;

				.icon {
					width: 250rpx;
					height: 250rpx;
					margin-bottom: 20rpx;
				}

				.icon1 {
					width: 220rpx;
					height: 150rpx;
				}

				.icon-text {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}

			.tips {
				position: fixed;
				bottom: 200rpx;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;

				.tips-text {
					font-size: 30rpx;
					color: #ffffff;
				}
			}

			.input-area {
				.u-textarea {
					background: rgba(245, 123, 0, 0.04) !important;
				}

				.uni-textarea-placeholder {
					color: #333333 !important;
					font-size: 28rpx !important;
					font-weight: 400 !important;
					font-family: PingFangSC, PingFang SC;
				}

				.u-textarea--radius {
					border-radius: 12rpx !important;
				}

				.u-border {
					border-color: #FF6B00 !important;
				}

			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin: 50rpx;
				gap: 40rpx;

				.u-button--plain {
					background: #fde4cb;
				}

				button {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					font-weight: 400;
					font-family: PingFangSC, PingFang SC;
					font-size: 28rpx !important;
					border: none !important;
				}


			}

			.platform-section {

				margin-top: 80rpx;

				.section1 {
					padding-bottom: 30rpx;
					display: flex;
					align-items: center;

					.icon1 {
						width: 34rpx;
						height: 34rpx;
					}

					.section-title {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						margin-left: 10rpx;
					}

				}

				.platform-grid {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 20rpx;
					padding: 0 10rpx;

					.platform-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 20rpx 0;

						.platform-icon {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 10rpx;
							border-radius: 20rpx;
						}

						.platform-name {
							font-size: 24rpx;
							color: #666;
							text-align: center;
						}
					}
				}
			}
		}

		.popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}

		.popup-content {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 75%;
			max-width: 640rpx;
			background-color: #FFF8F0;
			border-radius: 24rpx;
			padding: 36rpx;
			z-index: 1000;
			text-align: center;

			.close-btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #999;
				cursor: pointer;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.title-tips {
				font-weight: bold;
				font-size: 32rpx;
				color: #333;
			}

			.icon-container {
				margin: 40rpx 0;

				.popup-icon {
					width: 120rpx;
					height: 120rpx;
				}

			}


			.popup-text {
				// margin: 40rpx 0;
			}

			.error-text {
				display: block;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.btn-container {
				margin-top: 50rpx;
				margin-bottom: 30rpx;

				.back-btn {
					background-color: #F57B00;
					color: #fff;
					border: none;
					border-radius: 48rpx;
					padding: 6rpx 26rpx;
					font-size: 32rpx;
					width: 85%;
				}
			}



		}

		.drawer-content {
			width: 500rpx;
			height: 100vh;
			background-color: #ffffff;

			.drawer-header {
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.drawer-title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.drawer-list {
				padding: 20rpx 0;

				.drawer-item {
					display: flex;
					align-items: center;
					padding: 30rpx;

					text {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #333;
					}

					&:active {
						background-color: #f5f5f5;
					}
				}
			}
		}


		.video-list {
			background-color: #f8f8f8;

			.list-container {
				display: flex;
				flex-direction: column;
				gap: 15px;

				.video-item {
					background-color: #000;

					.video-info {
						padding: 20rpx;

						.video-title {
							font-size: 28rpx;
							color: #fff;
							line-height: 1.4;
							margin-bottom: 16rpx;
						}

						.video-meta {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.quality {
								font-size: 24rpx;
								color: #666;
								padding: 4rpx 12rpx;
								border-radius: 8rpx;
							}

							.save-btn {
								font-size: 24rpx;
								background: #FF7220;
								color: #fff;
								padding: 8rpx 16rpx;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>